<script setup>
import { reactive, ref, watch } from 'vue'

const props = defineProps({dialogFormOperation:{},operaData:{}})
const emits = defineEmits(["isShow1"])

const dFOperation = ref(props.dialogFormOperation);

const oPost = ref(props.operaData)

const ruleForm = reactive({
  approveState:props.operaData.approveState,//状态
  postscript: props.operaData.postscript,//备注
})

watch(()=>props.dialogFormOperation,(val)=>{
  dFOperation.value = val;
})

// 关闭按钮
function cancel(){
  dFOperation.value = false;
  emits("isShow1",false);
}
// 提交按钮
function submit(){
  dFOperation.value = false;
  ruleForm.approveState = '已完成';

  emits("isShow1",ruleForm);
  console.log("提交按钮");
}
console.log(ruleForm);

// 点击空白，点击右上角的X，按键盘esc键
function close(){
  emits("isShow1",false)
  console.log("X按钮");
}

</script>

<template>
  <el-dialog v-model="dFOperation" title="任务进度" :before-close="close">
    <el-form-item label="备注" prop="postscript">
      <el-input v-model="ruleForm.postscript" type="textarea" :rows="5" class="el-form-item-Multiline-text-box" />
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="submit">已完成</el-button>
      <el-button @click="cancel">未完成</el-button>
    </el-form-item>
  </el-dialog>
</template>


<style scoped>
    .el-form-item .task_person_tips{
        margin-left: 20px;
        color: #999;
    }
    .text-center{
        text-align: center;
    }
    .el-form-item-Multiline-text-box{
      margin-bottom: 16px;
    }
</style>
